<template>
  <!--柱状图-->
  <div id="addressChart" ref="addressChart" style="height:400px"></div>
</template>
<script type="text/javascript">
  import {panelTitle} from 'components'
  import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";

  export default {
    name: 'barChart',
    props: ['barData'],
    data() {
      return {
        barOption: this.barData,
      }
    },
    components: {
      ElFormItem,
      panelTitle
    },
    updated() {
      this.drawChart()
    },
    mounted() {
      this.drawChart()
    },
    computed: {
      xAxisData: function () {
        var xdata = [];
        for (var i = 0; i < this.barOption; i++) {
          xdata.push(this.barOption[i].name)
        }
        return xdata;
      },
      yAxisData: function () {
        var ydata = [];
        for (var i = 0; i < this.barOption; i++) {
          ydata.push(this.barOption[i].value)
        }
        return ydata;

      }
    },
    methods: {
      drawChart() {
        var xdata = [];
        for (var i = 0; i < this.barOption.length; i++) {
          xdata.push(this.barOption[i].name)
        }
        console.log(xdata)
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.addressChart, 'shine');
        var option = option = {
          xAxis: {
            type: 'category',
            show: false,
            data: xdata
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.barOption,
              type: 'bar',
              itemStyle: {
                normal: {
                  color: function (params) {
                    // build a color map as your need.
                    var colorList = [
                      '#c12e34', '#e6b600', '#2b821d', '#E87C25', '#27727B',
                      '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                      '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                  },
                  label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}\n{c}'
                  }
                }
              }
            }]
        };
        myChart.setOption(option)
      },
    }
  }
</script>

<style>
</style>
